<template>
  <view class="zj-navbar">
    <view
      class="zj-navbar__placeholder"
      v-if="fixed && placeholder"
      :style="{
        height: $u.addUnit($u.getPx(height) + statusBarHeight, 'px'),
      }"
    ></view>
    <view :class="[fixed && 'zj-navbar--fixed']">
      <u-status-bar
        v-if="safeAreaInsetTop"
        :bgColor="currentBg"
        :customStyle="barStyle"
      ></u-status-bar>
      <view
        class="zj-navbar__content"
        :class="[border && 'u-border-bottom']"
        :style="{
          height: $u.addUnit(height),
          backgroundColor: currentBg,
        }"
      >
        <view
          v-if="showLeft"
          :style="{ width: wxMenuBut.placeholder + 'px' }"
          class="zj-navbar__content__left"
          hover-class="zj-navbar__content__left--hover"
          hover-start-time="150"
        >
          <slot name="left">
            <view class="back_btn" @tap="goback">
              <!-- #ifdef MP-WEIXIN -->
              <u-icon
                v-if="isPre || needBack"
                name="arrow-left"
                :size="leftIconSize"
                :color="leftIconColor"
              ></u-icon>
              <!-- <u-icon
                v-if="!(isPre || needBack) && !isTabPage"
                name="home"
                :size="leftIconSize"
                :color="leftIconColor"
              ></u-icon> -->
              <text
                v-if="!(isPre || needBack) && !isTabPage"
                :style="{
                  'font-size': `${leftIconSize}rpx`,
                  color: leftIconColor,
                }"
                class="iconfont icon-shouye_icon1"
              ></text>

              <!-- #endif -->
            </view>
          </slot>
        </view>
        <view class="flex-1">
          <slot name="center">
            <view
              :style="[
                {
                  color: titleColor,
                  width: $u.addUnit(titleWidth),
                },
                $u.addStyle(titleStyle),
              ]"
              class="zj-navbar__content__title"
            >
              <text class="u-line-1">{{ title }}</text>
            </view>
          </slot>
        </view>
        <view class="zj-navbar__content__right" v-if="$slots.right">
          <slot name="right"></slot>
        </view>
        <!-- 如果是是微信端，放一个胶囊的点位符 -->
        <!-- #ifdef MP-WEIXIN -->
        <view
          :style="{ width: wxMenuBut.placeholder + 'px', display: 'block' }"
        ></view>
        <!-- #endif -->
      </view>
    </view>
    <slot name="extra"></slot>
  </view>
</template>

<script setup>
import { pages, pxToRpx } from "@/utils/index";
import { useSystemStore } from "@/store";
const storeSystem = useSystemStore();
const props = defineProps({
  // 是否开启顶部安全区适配
  safeAreaInsetTop: {
    type: Boolean,
    default: true,
  },
  needBack: {
    type: Boolean,
    default: false,
  },
  // 固定在顶部时，是否生成一个等高元素，以防止塌陷
  placeholder: {
    type: Boolean,
    default: true,
  },
  // 是否固定在顶部
  fixed: {
    type: Boolean,
    default: true,
  },
  // 是否显示下边框
  border: {
    type: Boolean,
    default: false,
  },
  // 标题
  title: {
    type: [String, Number],
    default: "",
  },
  // 背景颜色
  statusColor: {
    type: String,
    default: "#fff",
  },
  // 背景颜色
  bgColor: {
    type: String,
    default: "#fff",
  },
  // 标题的宽度
  titleWidth: {
    type: [String, Number],
    default: "350rpx",
  },
  // 导航栏高度
  height: {
    type: [String, Number],
    default: "44px",
  },
  showLeft: {
    type: Boolean,
    default: true,
  },
  // 左侧返回图标的大小
  leftIconSize: {
    type: [String, Number],
    default: 36,
  },
  // 左侧返回图标的颜色
  leftIconColor: {
    type: String,
    default: "#000",
  },
  titleColor: {
    type: String,
    default: "#1D1F24",
  },
  // 标题的样式，对象或字符串
  titleStyle: {
    type: [String, Object],
    default: {},
  },
  // 自定义返回事件
  customBack: {
    type: [Function, null],
    default: null,
  },
});

const emits = defineEmits(["getHeaderHeight", "rightClick"]);

const isPre = ref(true); //是否有上一个路由
const isTabPage = ref(true); //是否tab页面
const barStyle = ref({
  color: "#000",
});

const currentBg = computed(() => {
  return props.bgColor;
});
const statusBarHeight = computed(() => {
  return storeSystem.statusBarHeight;
});
const wxMenuBut = computed(() => {
  return storeSystem.wxMenuBut;
});

isPre.value = Boolean(pages.getPageRoute(1));
console.log('isPre.value--',isPre.value);
let headerHeight = uni.$u.addUnit(
  uni.$u.getPx(props.height) + statusBarHeight.value,
  "px"
);
console.log("headerHeight", headerHeight);
emits("getHeaderHeight", headerHeight);
isTabPage.value = getIsTabPage();

function getIsTabPage() {
  const pages = getCurrentPages();
  if (pages.length > 0) {
    // 获取当前页面的路径
    let currentPagePath = pages[pages.length - 1].route;
    const pathArray = ["/pages/home/index", "/pages/mine/index"];
    if (currentPagePath.charAt(0) !== "/") {
      currentPagePath = "/" + currentPagePath;
    }
    console.log("currentPagePath", currentPagePath);
    // 判断是否是tab页面
    return pathArray.some((path) => currentPagePath.includes(path));
  }
}
// 返回上一页，如果没有上一页，则返回首页
function goback() {
  if (props.customBack) {
    props.customBack();
    return;
  }
  if (!isPre.value) {
    uni.switchTab({
      url: "/pages/home/index",
    });
  } else {
    // uni.navigateBack();
    console.log("测试");
    wx.navigateBack({
      delta: 1,
    });
  }
}
// 点击右侧区域
function rightClick() {
  emits("rightClick");
}
</script>




<style lang="scss" scoped>
.zj-navbar {
  &--fixed {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 11;
  }

  &__content {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #9acafc;
    position: relative;
    justify-content: center;

    &__left,
    &__right {
      padding: 0 0;
    }

    &__left {
      display: flex;
      &--hover {
        opacity: 0.7;
      }
      .back_btn {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    &__title {
      text-align: center;
      font-size: 34rpx;
      color: $u-main-color;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
